<template>
	<view class="content">
		<view class="fill">
		</view>
		<uni-icons @click="back()" type="back" size="25" color="#fff"></uni-icons>
		<view class="content-page">
			<view class="content-page-tip"> 排行榜 </view>
			<view class="content-page-box">
				<view class="content-page-box-t">
					<view>
						<text>排名</text>
						<text>用户</text>
						<text>金额</text>
					</view>
					<view>
						<view v-for="(item,index) in list" :key="index">
							<view>
								<image v-if="index<3"
									:src="`https://images.linglinggong.net/static/icon3/${index+1}-${index+1}.png`"
									class="image"></image>
								<view v-else class="image">{{index+1}}</view>
							</view>
							<view>
								<image
									:style="{border:index==0?'2px solid #F7C366':index==1?'2px solid #B6C0C6':index==2?'2px solid #DD855A':''}"
									:src="`https://images.linglinggong.net/${item.avatar}`"
									:class="['img',index===0&&'yellow',index===1&&'white',index===2&&'golden']"></image>
							</view>
							<text>
								{{item.userName}}
							</text>
							<text>
								{{item.gainRevenue}}元 </text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="image">
				<!-- <image src="../../static/icon3/2-2.png" class="image" v-if="1">
					<view v-else class="image">2</view> -->
				{{user.rank}}
			</view>
			<view>
				<image :src="`https://images.linglinggong.net/${user.avatar}`" class="img">
			</view>
			<view> {{user.userName}} </view>
			<view> {{user.gainRevenue}}元 </view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				user: {}
			}
		},
		methods: {
			// 经纪人排行榜
			async query_charts() {
				let res = await this.$fetch(this.$api.query_charts, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.list = res.data.list
				this.user = res.data.user
				if (!this.user.rank) {
					this.user.rank = "99+"
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onLoad() {
			this.query_charts()
		}
	}
</script>
<style lang="less" scoped>
	.content {
		width: 750rpx;
		min-height: 100vh;
		width: 100%;
		overflow: hidden;
		position: fixed;
		background: linear-gradient(180deg, #FFDB9C 0%, #FAC396 39%, #FBCDAE 70%, #F75B48 100%);
		position: fixed;
		top: 0;

		.fill {
			width: 100%;
			height: 100rpx;
		}

		.uni-icons {
			margin-top: 100rpx;
			margin-left: 30rpx;
		}

		&-page {
			background: #FDF4E1;
			width: 686rpx;
			height: 80vh;
			border: 1px solid #FACE78;
			border-radius: 12rpx;
			margin: 6vh auto 0 auto;

			&-tip {
				height: 48rpx;
				width: 239rpx;
				background: url("https://images.linglinggong.net/static/num.png") center center/cover no-repeat;
				margin: -26rpx auto 0;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 48rpx;
			}

			&-box {
				width: 660rpx;
				height: 77.5vh;
				overflow: scroll;
				border: 1px dotted #FACE78;
				border-radius: 12rpx;
				margin: 0 auto;

				&-t {
					margin: 0 7rpx;

					&>view:nth-child(1) {
						position: sticky;
						top: 0;
						background: #FDF4E1;
						z-index: 999;
						color: #F2563C;
						display: flex;
						justify-content: space-between;
						text-wrap: nowrap;
						height: 81rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom: 1px solid rgba(95, 7, 3, 0.3);
						font-weight: bold;

						&>text:nth-child(1) {
							margin-left: 46rpx;
						}

						&>text:nth-child(2) {
							margin: 0 193rpx 0 148rpx;
						}

						&>text:nth-child(3) {
							margin-right: 81rpx;
						}
					}

					&>view:nth-child(2) {
						display: flex;
						flex-direction: column;

						&>view {
							font-size: 28rpx;
							font-weight: bold;
							color: #661404;
							height: 113rpx;
							display: flex;
							align-items: center;
							border-bottom: 1px solid rgba(95, 7, 3, 0.3);

							.image {
								width: 133rpx;
								height: 40rpx;
								text-align: center;
								font-size: 36rpx;
								font-weight: bold;
								color: #661404;
								line-height: 40rpx;
							}

							.img {
								width: 57rpx;
								height: 57rpx;
								border-radius: 50%;
								margin: 0 9rpx 0 80rpx;
							}

							&>text:nth-child(4) {
								margin-left: auto;
								margin-right: 70rpx;
							}

							&>text:nth-child(4) {
								margin-left: auto;
								margin-right: 70rpx;
							}

							&>text:nth-child(4) {
								margin-left: auto;
								margin-right: 70rpx;
							}

							&>text:nth-child(4) {
								margin-left: auto;
								margin-right: 70rpx;
							}
						}
					}
				}
			}
		}
	}

	.footer {
		width: 100vw;
		height: 6vh;
		background: #FFF2DC;
		box-shadow: 0rpx 7rpx 55rpx 2rpx rgba(183, 21, 31, 0.41), 0rpx 11rpx 46rpx 0rpx #FDF4E1;
		border-radius: 12rpx;
		position: absolute;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		color: #F2563C;

		&>view:nth-child(1) {
			width: 133rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			margin-left: 56rpx;
			font-size: 36rpx;
			font-weight: bold;
			margin: 0 80rpx 0 54rpx;
		}

		&>view:nth-child(2) {
			.img {
				width: 58rpx;
				height: 59rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}
		}

		&>view:nth-child(3) {}

		&>view:nth-child(4) {
			margin-left: auto;
			margin-right: 120rpx;
		}
	}

	//头像框
	.yellow {
		border: 4rpx solid yellow;
	}

	.white {
		border: 4rpx solid white;
	}

	.golden {
		border: 4rpx solid blue;
	}
</style>